<template>
  <div class="container">
    <!-- 搜索模块 -->
    <el-row justify="space-between">
      <el-col :span="20"
        ><el-form label-width="80px">
          <el-form-item label="关键字">
            <el-input placeholder="根据编号搜索" v-model="queryinfo.keyword"></el-input>
          </el-form-item> </el-form
      ></el-col>
      <el-col :span="4" class="btn-search"><el-button @click="queryinfo.keyword = ''">清除</el-button><el-button type="primary" @click="getList">搜索</el-button></el-col>
    </el-row>
    <!-- 警告框模块 -->
    <el-alert :title="alertText" type="info" show-icon :closable="false"></el-alert>
    <!-- table表格 -->
    <el-table style="width: 100%" :data="dataList" v-loading="listLoading">
      <el-table-column prop="id" label="编号"> </el-table-column>
      <el-table-column prop="questionType" label="题型" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.questionType === '1'">单选</span>
          <span v-else-if="scope.row.questionType === '2'">多选</span>
          <span v-else>简答</span>
        </template>
      </el-table-column>
      <el-table-column prop="questionIDs" label="题目编号" width="240">
        <template slot-scope="scope">
          <el-link type="primary" @click="showPreview(item.id)" :underline="false" class="subjectId" v-for="(item, i) in scope.row.questionIDs" :key="i">{{ item.number }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="addTime" label="录入时间"> </el-table-column>
      <el-table-column prop="totalSeconds" label="答题时间(s)"> </el-table-column>
      <el-table-column prop="accuracyRate" label="正确率(%)"> </el-table-column>
      <el-table-column prop="userName" label="录入人"> </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-delete" circle type="danger" @click="removeList(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页模块 -->
    <div class="pagination">
      <div class="pages">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(queryinfo.page)"
          :page-sizes="[10, 25, 30, 35]"
          :page-size="Number(queryinfo.pagesize)"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </div>
    <!-- 预览对话框 -->
    <el-dialog title="题目预览" :visible.sync="previewDialogVisible" width="55%">
      <questions-preview :TableID="dataId"></questions-preview>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="btnComfire" @click="previewDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import QuestionsPreview from '@/module-hmmm/components/questions-preview.vue'
export default {
  data () {
    return {
      queryinfo: {
        keyword: '',
        // 当前页
        page: 1,
        // 每页显示的条数
        pagesize: 10
      },
      dataList: [],
      total: 0,
      alertText: '',
      listLoading: true,
      previewDialogVisible: false,
      dataId: 0
    }
  },
  components: {
    QuestionsPreview
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      this.listLoading = true
      const { data } = await randoms(this.queryinfo)
      console.log(data)
      this.dataList = data.items
      this.total = data.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    removeList (id) {
      // 删除
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id: id })
          .then(response => {
            this.$message.success('成功删除了用户' + '!')
            this.dataList.splice(id, 1)
            this.getList()
          }).catch(response => {
            this.$message.error('删除失败!')
          })
      }).catch(() => {
        this.$message.info('已取消操作!')
      })
    },
    handleSizeChange (newsize) {
      // console.log(newsize)
      // 控制每页显示多少条数据
      this.queryinfo.pagesize = newsize
      this.getList(this.queryinfo)
    },
    // 监听页码值 改变的事件
    handleCurrentChange (newPage) {
      // 控制页码值
      // console.log(newPage)
      this.queryinfo.page = newPage
      // console.log(this.queryinfo.page = newPage)
      this.getList(this.queryinfo)
    },
    showPreview (id) {
      this.previewDialogVisible = true
      this.dataId = id
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  margin: 15px 10px;
  padding: 20px;
  background: #fff;
  .el-input {
    width: 300px;
  }
  .btn-search {
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }
  .el-alert {
    margin-bottom: 10px;
  }
  .el-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
  }
  .subjectId {
    text-align: center !important;
  }
  .btnComfire {
    position: relative;
    right: -290px;
    bottom: 0;
  }
}
</style>
